import React, { memo, useEffect, shallowequal, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Carousel } from 'antd'
import { NewAlbumWrap } from './style'
import HNThemeHeaderRecommend from 'components/theme-header-recommend'
import HNAlbumCover from 'components/album-cover'
import { getNewAlbumsAction } from '../../store/actionCreactor'

export default memo(function HNNewAlbum() {

  const albumRef = useRef();
  const { newAlbums } = useSelector(state => ({
    newAlbums: state.getIn(["recommend", "newAlbums"])
  }), shallowequal)
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getNewAlbumsAction(10, 0))
  }, [dispatch])
  return (
    <NewAlbumWrap>
      <HNThemeHeaderRecommend title="新碟上架" />
      <div className="new-list">
        <div className="arrow left sprite_02" onClick={e=>{albumRef.current.prev()}}></div>
        <div className="album">
        <Carousel ref={albumRef} dots={false}>
          {
            [0,1].map(item=>{
              return(
                <div className="item" key={item}>
                  {
                    newAlbums.slice(item*5,(item+1)*5).map((item,index)=>{
                      return(
                        <HNAlbumCover item={item} key={item.id}/>
                      )
                    })
                  }
                </div>
              )
            })
          }
        </Carousel>
        </div>
        <div className="arrow right sprite_02" onClick={e=>{albumRef.current.next()}}></div>
      </div>
    </NewAlbumWrap>
  )
})
